import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { DecaysByMonth, DeploymentTimeline, MembershipNote, OrbitalShells, StatusDonut } from '@/components/entities/constellation-panels';
import { Block, EventsList, ExternalLink, HeroFacts, KpiStrip, PlannedUnavailable, Tag, entityMetadata } from '@/components/entities/shared';
import { LaunchesTable, SatellitesTable, SitesTable } from '@/components/entities/tables';
import { OrbitBadge } from '@/components/ui/badges';
import { Container } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { ApiError, api } from '@/lib/api';
import { fmt1, fmtDate, fmtDateTime, fmtInt, fmtPct, num, titleCase } from '@/lib/format';
import { SITE_URL, routes } from '@/lib/site';
import type { ConstellationDetail } from '@/lib/types';

type Props = { params: Promise<{ slug: string }> };

async function load(slug: string): Promise<{ d: ConstellationDetail; generatedAt: string } | null> {
  try {
    const res = await api.constellation(slug);
    return { d: res.data, generatedAt: res.meta.generated_at };
  } catch (e) {
    if (e instanceof ApiError && e.notFound) return null;
    throw e;
  }
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const r = await load(slug).catch(() => null);
  if (!r) return { title: 'Constellation not found', robots: { index: false } };
  const { d } = r;
  const desc = `${d.name}${d.operator_name ? ` (${d.operator_name})` : ''}: ${fmtInt(d.active)} active satellites, ${fmtInt(d.total)} launched since ${fmtDate(d.first_launch)}. ${d.orbit_class ?? ''} ${titleCase(d.service_type)} constellation — deployment timeline, orbital shells, launch history and status.`;
  return entityMetadata({ title: `${d.name} — ${fmtInt(d.active)} active satellites, ${d.orbit_class ?? 'mixed'} constellation`, description: desc, path: routes.constellation(d.slug), ogImage: `${SITE_URL}${routes.constellation(d.slug)}/opengraph-image` });
}

export default async function ConstellationPage({ params }: Props) {
  const { slug } = await params;
  const r = await load(slug);
  if (!r) notFound();
  const { d, generatedAt } = r;
  const active = num(d.active);
  const planned = d.planned_count;
  const plannedPct = planned && active !== null ? (active / planned) * 100 : null;

  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Dataset',
    name: `${d.name} constellation`,
    description: d.description ?? `${d.name} satellite constellation tracked by SatelliteIndex`,
    url: `${SITE_URL}${routes.constellation(d.slug)}`,
    creator: d.operator_name ? { '@type': 'Organization', name: d.operator_name, url: d.operator_slug ? `${SITE_URL}${routes.operator(d.operator_slug)}` : undefined } : undefined,
    variableMeasured: ['active satellites', 'satellites on orbit', 'launches'],
  };

  return (
    <Container wide>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />

      {/* Hero */}
      <header className="pb-6 pt-8 md:pb-8 md:pt-12">
        <nav aria-label="Breadcrumb" className="eyebrow">
          <Link href={routes.constellations()} className="hover:text-ink">Constellations</Link> <span aria-hidden>/</span> {d.name}
        </nav>
        <div className="mt-3 flex flex-wrap items-center gap-2">
          <OrbitBadge orbitClass={d.orbit_class} />
          {d.service_type && <Tag>{titleCase(d.service_type)}</Tag>}
          <Tag tone={d.lifecycle_stage === 'OPERATIONAL' ? 'accent' : 'warn'}>{titleCase(d.lifecycle_stage.toLowerCase())}</Tag>
        </div>
        <h1 className="display mt-3 text-3xl md:text-5xl">{d.name}</h1>
        <p className="mt-3 max-w-2xl text-[15px] text-ink-2 md:text-base">
          {d.operator_slug ? <Link href={routes.operator(d.operator_slug)} className="link">{d.operator_name}</Link> : d.operator_name ?? 'Operator unavailable'}
          {d.country_slug && (
            <>
              {' '}· <Link href={routes.country(d.country_slug)} className="link">{d.country_name}</Link>
            </>
          )}
        </p>
        {d.description && <p className="mt-4 max-w-3xl text-[15px] leading-relaxed text-ink-2">{d.description}</p>}
        <HeroFacts
          items={[
            { label: 'Official site', value: d.official_url ? <ExternalLink href={d.official_url} /> : null },
            { label: 'Deployment vs plan', value: planned ? `${fmtInt(active)} of ${fmtInt(planned)} planned (${fmtPct(plannedPct, 0)})` : null },
            { label: 'Authorized', value: d.authorized_count ? `${fmtInt(d.authorized_count)} satellites` : null },
            { label: 'Median orbit', value: num(d.median_perigee_km) !== null ? `${fmtInt(d.median_perigee_km)} km · ${fmt1(d.median_inclination_deg)}°` : null },
          ]}
        />
      </header>

      <KpiStrip
        items={[
          { label: 'Active', value: <span className="text-active">{fmtInt(d.active)}</span> },
          { label: 'Inactive', value: fmtInt(d.inactive) },
          { label: 'Decayed', value: fmtInt(d.decayed) },
          { label: 'On orbit', value: fmtInt(d.on_orbit) },
          { label: 'Total launched', value: fmtInt(d.total) },
          { label: 'Launches', value: fmtInt(d.launches) },
          { label: 'Launched 30 d', value: fmtInt(d.launched_last_30d) },
          { label: 'Launched 365 d', value: fmtInt(d.launched_last_365d) },
          { label: 'First launch', value: <span className="text-xl md:text-2xl">{fmtDate(d.first_launch)}</span> },
          { label: 'Last launch', value: <span className="text-xl md:text-2xl">{fmtDate(d.last_launch)}</span> },
          { label: 'Activity score', value: <span className="text-accent-2">{fmt1(d.activity_score)}</span>, derived: true, hint: 'launch cadence index' },
          { label: 'Snapshot', value: <span className="text-base text-ink-2 md:text-lg">{fmtDateTime(generatedAt)}</span> },
        ]}
      />

      {/* Terminal layout: main analysis + right telemetry column */}
      <div className="grid gap-x-10 lg:grid-cols-[minmax(0,7fr)_minmax(0,4fr)]">
        <div className="min-w-0">
          <Block eyebrow="Deployment" title="Deployment timeline" id="timeline">
            <DeploymentTimeline growth={d.growth} />
          </Block>
          <Block eyebrow="Orbits" title="Orbital shells" id="shells">
            <OrbitalShells d={d} />
          </Block>
          <Block eyebrow="Launches" title={`Launch history · ${fmtInt(d.launches)} launches`} id="launches">
            <LaunchesTable rows={d.launches_list} showActive />
            {d.launches_list.length < (num(d.launches) ?? 0) && <p className="mt-2 text-xs text-ink-3">Showing the {fmtInt(d.launches_list.length)} most recent launches.</p>}
          </Block>
          <Block eyebrow="Fleet" title="Recent satellites" id="satellites" action={{ href: routes.satellites(`constellation=${encodeURIComponent(d.slug)}`), label: 'All satellites in this constellation' }}>
            <SatellitesTable rows={d.recent_satellites} columns={['perigee', 'apogee', 'inclination']} />
          </Block>
          {d.decays_by_month.length > 0 && (
            <Block eyebrow="Reentries" title="Decays by month" id="decays">
              <DecaysByMonth rows={d.decays_by_month} />
            </Block>
          )}
          <Block eyebrow="Timeline" title="Events" id="events" action={{ href: routes.events(`entity=${encodeURIComponent(d.id)}`), label: 'All events' }}>
            <EventsList events={d.events} />
          </Block>
        </div>

        <aside className="min-w-0 lg:border-l lg:border-rule lg:pl-10">
          <Block eyebrow="Status" title="Status distribution">
            <StatusDonut dist={d.status_distribution} total={num(d.total)} />
          </Block>
          <Block eyebrow="Ground" title="Launch sites">
            <SitesTable rows={d.launch_sites} showSatellites />
          </Block>
          <Block eyebrow="Registry" title="Countries">
            {d.countries.length === 0 ? (
              <Unavailable what="Country attribution" compact />
            ) : (
              <ul className="divide-y divide-rule text-sm">
                {d.countries.map((c) => (
                  <li key={c.code} className="flex items-center justify-between gap-3 py-2">
                    <Link href={routes.country(c.slug)} className="link">{c.name} <span className="mono ml-1 text-xs text-ink-3">{c.code}</span></Link>
                    <span className="tnum">{fmtInt(c.satellites)}</span>
                  </li>
                ))}
              </ul>
            )}
          </Block>
          <Block eyebrow="Regulatory" title="Regulatory filings">
            <PlannedUnavailable what="Regulatory filings" note="FCC / ITU connectors are planned; filings will appear here with source attribution once ingested." />
          </Block>
          <Block eyebrow="Methodology" title="How membership is determined">
            <MembershipNote d={d} />
          </Block>
        </aside>
      </div>
    </Container>
  );
}